<?php
include 'includes/utilities.php';
?>
<html>
    <head>
        <link type="text/css" href="styles/style.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <title>Ingreso</title>
        <script type="text/javascript">
            function validarUsuario() {
                $.ajax({
                    url: "validarUsuario.php",
                    type: "post",
                    data: ({usuario: $("#usuario").val(), password: $("#password").val()}),
                    success: function(data) {
                        if(data == "1") {
                            window.location = "index.php";                                
                        } else {
                            $(".errorMSG").html("Los datos ingresados son incorrectos");
                        }
                    }
                });
            }
            $(function(){
                $("#ingresar").click(function(event){
                    validarUsuario();
                    event.preventDefault(); 
                });
                $("#usuario").focus();
                $("#password").keyup(function(event){
                    if (event.keyCode == 13) {
                        validarUsuario();
                    }
                });
            });    
        </script>
    </head>
    <body>
        <div id="lock"><img src="imagenes/lock.png" alt="lock" /></div>
        <div class="loginContainer">
            <div class="inputField">
                <div class="input_label">
                    <label>Usuario: </label>
                </div>
                <div class="input">
                    <input type="text" name="usuario" id="usuario" />
                </div>
            </div>
            <div class="inputField">
                <div class="input_label">
                    <label>Contrase&ntilde;a</label>
                </div>
                <div class="input">
                    <input type="password" name="password" id="password" />
                </div>
            </div>
            <div id="loginButton">
                <button id="ingresar">Ingresar</button>    
            </div>
        </div>
        <div class="errorMSG"></div>
    </body>
</html>